<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/AdminLTE.css">
<link rel="stylesheet" href="css/admin.css">
<title>功能</title>
<section class="content-header">
<h1>
    功能
</h1>
<ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-home"></i>首页</a></li>
    <li class="active">功能</li>
</ol>
</section>

<style type="text/css">


.func-card{
    background: #fff;
    border-radius: 3px;
    position: relative;
    padding: 45px;
    width: 434px;
    height: 216px;
    margin-bottom: 40px;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.17);
    transition: box-shadow 0.2s ease;
}
.func-box:nth-child(odd) .func-card{
    float: right;
    margin-right: 20px;
}
.func-box:nth-child(even) .func-card{
    float: left;
    margin-left: 20px;
}
.func-card:before,
.func-card:after{
    content: '';
    display: table;
    clear: both;
}
.func-card:hover{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
}
.func-img-box{
    float: left;
    width: 100px;
    height: 100%;
    margin-right: 15px;
}
.func-img-box .func-img{
    /*margin-top: 20px;*/
    width: 100px;

}
.func-info{
    color: #626262;
}
.func-switch-btn{
    position: absolute;
    right: 45px;
    top: 45px;
}
.func-card .func-title{
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
    color: #2C2E34;
}
@media(max-width: 768px) {
    .func-card{
        width: auto;
        margin: 20px;
    }
}
</style>

<div class="m-container">
    <div class="row">
        <div class="col-md-6 func-box">
            <div class="func-card">
                <div class="func-img-box">
                    <img src="img/func1.png" alt="" class="func-img">
                </div>
                <div class="func-body">
                    <a href="wall-set.html"><h3 class="func-title">上墙</h3></a>
                    <p class="func-info">
                        现场互动，引爆火热大气氛，客人可以在微信手机端发送文字、图片、表情等信息，即可在大屏幕上实时显示......
                    </p>
                </div>
                <div class="func-switch-btn">
                    <span class="m-switch">
                        <input type="checkbox" class="m-switch-trigger" checked>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-6 func-box">
            <div class="func-card">
                <div class="func-img-box">
                    <img src="img/func2.png" alt="" class="func-img">
                </div>
                <div class="func-body">
                    <a href="shake-set.html"><h3 class="func-title">摇一摇</h3></a>
                    <p class="func-info">
                        现场摇一摇，引爆大气氛，大屏幕实时出现排名，全场一起嗨......
                    </p>
                </div>
                <div class="func-switch-btn">
                    <span class="m-switch">
                        <input type="checkbox" class="m-switch-trigger">
                    </span>
                </div>
            </div>
        </div>

        <div class="col-md-6 func-box">
            <div class="func-card">
                <div class="func-img-box">
                    <img src="img/func3.png" alt="" class="func-img">
                </div>
                <div class="func-body">
                    <a href="vote-set.html"><h3 class="func-title">投票</h3></a>
                    <p class="func-info">
                        通过在手机微信端进行实时的现场投票，屏幕显示实时的票数......
                    </p>
                </div>
                <div class="func-switch-btn">
                    <span class="m-switch">
                        <input type="checkbox" class="m-switch-trigger" checked>
                    </span>
                </div>
            </div>
            
        </div>
        <div class="col-md-6 func-box">
            <div class="func-card">
                <div class="func-img-box">
                    <img src="img/func4.png" alt="" class="func-img">
                </div>
                <div class="func-body">
                    <a href="award-set.html"><h3 class="func-title">抽奖</h3></a>
                    <p class="func-info">
                        客人可以通过扫描屏幕的二维码进入抽奖的名单内，现场进行实时抽奖，便捷、有趣......
                    </p>
                </div>
                <div class="func-switch-btn">
                    <span class="m-switch">
                        <input type="checkbox" class="m-switch-trigger">
                    </span>
                </div>
            </div>
        </div>


    </div>
</div>
